<script setup>
import { ref } from 'vue';

const vA清除 = {
  mounted: (el) => console.log(`el👉`, el),
  updated(el, binding, vnode, prevVnode) {
    console.log(`el updated👉`, el)
  },
}
const 标题 = ref()
const 输入框el = ref()
function 失焦() {
  console.log("失去焦点", 输入框el.value);
  console.log("失去焦点", 输入框el.value.getNativeElement());

}
// function 输入框input(e){
//   console.log("输入框input",e.target.value);
// }
function 输入框input() {
  console.log("输入框input", e.target.value);
}
const 是否显示清除按钮 = ref(true)

const blur = (event) => {
  是否显示清除按钮.value = false
};
const focus = (event) => {
  是否显示清除按钮.value = true
  // event.target.value 包含了输入框的当前值
  console.log('event:', event);
  console.log('event:', event.target.value);
  if (event.target.value == "") {
    console.log(`还没输入东西👉`)
    // 是否显示清除按钮.value=false
  }
  // 如果你想更新一个响应式变量
  // myValue.value = event.target.value;
};
const focus1 = (event) => {
  是否显示清除按钮.value = true
  // event.target.value 包含了输入框的当前值
  console.log('event:', event);
  console.log('event:', event.target.value);
  if (event.target.value == "") {
    console.log(`还没输入东西👉`)
    // 是否显示清除按钮.value=false
  }
  // 如果你想更新一个响应式变量
  // myValue.value = event.target.value;
};
const update_model = (event) => {
  // event.target.value 包含了输入框的当前值
  console.log('Input value:', event);
  if (event == "") {
    console.log(`还没输入东西👉`)
    // 是否显示清除按钮.value=false
  }
  // 如果你想更新一个响应式变量
  // myValue.value = event.target.value;
}
</script>

<template>
  <q-card>
    <q-card-section class="bg-accent text-white">
      <div class="text-h6">去掉输入框的X：</div>
    </q-card-section>
    <q-separator inset />
    <q-card-section>
      <div class="row q-gutter-lg q-mt-lg">
        <q-input v-model="标题" :clearable="是否显示清除按钮" @focus="focus" @blur="blur" placeholder="失去焦点去掉清除符合">
          <template v-slot:prepend>
            <div class="加粗">标题</div>
          </template>
        </q-input>
        <q-input v-model="标题" :clearable="是否显示清除按钮" @focus="focus" @blur="blur" label="标签" placeholder="失去焦点去掉清除符合">
          <template v-slot:before>
            <div class="加粗 y10">标题</div>
          </template>
        </q-input>
      </div>
    </q-card-section>
  </q-card>
  <q-card>
    <q-card-section class="bg-accent text-white">
      <div class="text-h6">去掉输入框的X：</div>
    </q-card-section>
    <q-separator inset />
    <q-card-section>

        <div class="加粗 text-orange-13">标题:text-orange-13</div>
        <div class="加粗 text-amber">标题:text-amber</div>
        <div class="加粗 text-yellow-10">标题:text-yellow-10</div>
        <div class="加粗 text-yellow-14">标题:text-yellow-14</div>

    </q-card-section>
  </q-card>
</template>

<style scoped></style>
